<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      v-on="$listeners"
      :visible.sync="dialogVisible"
      @open="onOpen"
      @close="onClose"
      :title="$t('model.quality')"
    >
      <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
        <el-form-item :label="$t('model.quality')" prop="qualityRuleName">
          <el-select
            v-model="formData.qualityRuleId"
            @change="qualityRuleChange"
            :placeholder="$t('model.select-quality-rule')"
            clearable
            :style="{width: '100%'}"
          >
            <el-option
              v-for="(item, index) in qualityRuleOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <div :class="dictShow">
          <el-form-item label="码表" prop="dictPartId">
            <el-select
              v-model="formData.dictPartId"
              placeholder="请选择码表"
              clearable
              :style="{width: '100%'}"
            >
              <el-option
                v-for="(item, index) in dictPartIdOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="码表字段" prop="dictPartColumnId">
            <el-select
              v-model="formData.dictPartColumnId"
              placeholder="请选择码表字段"
              clearable
              :style="{width: '100%'}"
            >
              <el-option
                v-for="(item, index) in dictPartColumnIdOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
     <div class="select-columns">{{$t('base.select-columns')}}</div>
      <el-table :data="columnInfoData" style="width: 100%" ref="columnInfo" border>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="title" :label="$t('model.field-chinese-name')" width="280"></el-table-column>
        <el-table-column prop="name" :label="$t('model.field-english-name')" width="280"></el-table-column>
        <el-table-column prop="type" :label="$t('model.field-type')"></el-table-column>
      </el-table>
      <div slot="footer">
        <el-button @click="close">{{$t('base.cancel')}}</el-button>
        <el-button type="primary" @click="handelConfirm">{{$t('base.ok')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  components: {},
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    tableId: {
      type: Number,
      required: true
    },
    columnInfoData: {
      type: Array
    }
  },
  data() {
    return {
      dictShow: "dict-show",
      formData: {
        qualityRuleId: undefined,
        dictPartId: undefined,
        dictPartColumnId: undefined
      },
      qualityRuleOptions: [],
      dictPartIdOptions: [],
      dictPartColumnIdOptions: []
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onOpen() {
      var _this = this;
      this.axios
        .post(this.HOST + "modelcolumn/qualityRuleList")
        .then(function(res) {
          res = res.data;
          if (res.status == "1") {
            _this.qualityRuleOptions = res.data;
          } else {
            console.log(res.stackmessage);
          }
          _this.loading = false;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    onClose() {
      this.$refs["elForm"].resetFields();
      this.$emit("qualityDialogClose", this.dialogVisible);
    },
    close() {
      this.$refs["elForm"].resetFields();
      this.$emit("qualityDialogClose", this.dialogVisible);
    },
    handelConfirm() {
      var selectRows = this.$refs.columnInfo.selection;
      var ids = [];
      var columnNames = [];
      for (var i = 0; i < selectRows.length; i++) {
        ids.push(selectRows[i].id);
        columnNames.push(selectRows[i].name);
      }
      var _this = this;
      _this.axios
        .post(this.HOST + "modelcolumn/multiSaveQualityRule", {
          tableId: this.tableId,
          columnIds: ids,
          columnNames: columnNames,
          qualityRuleId:
            this.formData.qualityRuleId != null
              ? this.formData.qualityRuleId
              : 0,
          dictPartId:
            this.formData.dictPartId != null ? this.formData.dictPartId : 0,
          dictPartColumnId:
            this.formData.dictPartColumnId != null
              ? this.formData.dictPartColumnId
              : 0
        })
        .then(function(res) {
          res = res.data;
          if (res.status == "1") {
            if (res.data) {
              _this.$refs["elForm"].resetFields();
              _this.$emit("qualityDialogSave", _this.dialogVisible);
            } else {
              _this.$message.error(_this.$t("model.exist-quality-rule"));
            }
          } else {
            console.log(res.stackmessage);
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    qualityRuleChange(value) {
      this.dictShow = value == 222 ? "dict-show" : "dict-hidden";
    }
  }
};
</script>
<style scoped>
.dict-show {
  display: block;
}
.dict-hidden {
  display: none;
}
.select-columns{
    text-align: left;
    line-height: 30px;
}
</style>>
</style>
